<template>
	<view>
		<!-- 积分首页 -->
		<view class="points">

			<view class="title">
				可用积分
			</view>
			<view class="num">
				3000
			</view>
			<view class="tab flex">
				<view class="flex-sub flex justify-end align-center ">
					<text class="text1" @click="jumpPoint">
						如何获取积分
					</text>
				</view>
				<view class="flex-sub flex justify-start align-center ">
					<text class="text2" @click="jumpDetail">
						积分明细
					</text>
				</view>
				
			</view>

		</view>


		<!-- 优惠券 -->

		<view class="coupon-con w100 flex align-center flex-direction">

			<view class="dataList flex align-center flex-direction" v-for="(item,index) in 3" :key="index">

				<view class="coupon bg-gradual-orange flex">
					<view class="item1 relative">
						<view class="text1">
							￥66.00
						</view>
						<view class="text2">
							满减券
						</view>

						<view class="around1"></view>
						<view class="around2"></view>
					</view>
					<view class="item2 relative">

						<view class="text1">
							这个是优惠券名称
						</view>
						<view class="text2 flex justify-start align-center">
							<image class="w30 h30 mr-8" src="/static/store/jiantou.png"></image>
							<text>
								满50元可用
							</text>
						</view>
						<view class="text3 flex justify-start align-center">
							<image class="w30 h30 mr-8" src="/static/store/jiantou.png"></image>
							<text>
								2020-2021
							</text>
						</view>
						
						<!-- 立即兑换 -->
						<view class="redeemNow">
							立即兑换
						</view>

					</view>

				</view>


			</view>


		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			jumpPoint(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.distribution.integralRule,
					query: {
						a: 1
					}
				})
			},
			jumpDetail(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.distribution.myPoints,
					query: {
						a: 1
					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.points {
		width: 750rpx;
		height: 280rpx;
		background-color: #eee;

		.title {
			width: 750rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 38rpx;
			font-weight: bold;
		}

		.num {
			width: 750rpx;
			text-align: center;
			font-size: 38rpx;
			line-height: 90rpx;
			color: #fc2b25;
		}

		.tab {
			width: 750rpx;
			height: 100rpx;
			
			.text1 {
				margin-right: 30rpx;
			}
			.text2 {
				margin-left: 30rpx;
			}

			text {
				display: inline-block;
				padding: 6rpx 20rpx;
				font-size: 26rpx;
				line-height: 48rpx;
				border: 1rpx solid #333;
				border-radius: 6rpx;
				color: #333;
			}
		}
	}

	.coupon-con {
		padding-top: 38rpx;

		// 优惠券
		.dataList {
			width: 750rpx;
			padding: 0 32rpx;

			.coupon {
				width: 686rpx;
				height: 220rpx;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				;

				.item1 {
					flex: 3;
					border-right: 4rpx solid white;

					view {
						width: 100%;
						height: 110rpx;
						text-align: center;
						color: white;
					}

					.text1 {
						font-size: 36rpx;
						font-weight: bold;
						line-height: 130rpx;
					}

					.text2 {
						font-size: 42rpx;
						line-height: 90rpx;
					}

					.around1 {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						right: -16rpx;
						top: -12rpx;
						background-color: white;
						border-radius: 50%;
					}

					.around2 {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						right: -16rpx;
						bottom: -12rpx;
						background-color: white;
						border-radius: 50%;
					}
				}

				.item2 {
					flex: 5;
					padding: 20rpx 32rpx;

					.text1 {
						font-size: 36rpx;
						font-weight: bold;
						line-height: 80rpx;
					}

					.text2 {
						line-height: 50rpx;
						font-size: 28rpx;
					}

					.text3 {
						line-height: 50rpx;
						font-size: 28rpx;
					}
					
					.redeemNow{
						position: absolute;
						right:32rpx;
						bottom: 20rpx;
						width:160rpx;
						height:60rpx;
						background: #d4237a;
						// background: gray;
						border-radius: 16rpx;
						line-height: 60rpx;
						text-align: center;
						
					}
				}
			}

		}


	}
</style>
